

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import App2 from './App2';
import router from './router';

// 将axios工具绑定到vue实例的原型中：
// 目的：为了在任何vue组件中都能够使用this.$axios获取axios工具
import axios from "axios";
import qs from "qs";
// import common from './common/common'
Vue.prototype.$axios = axios; // 类似于aJAX请求
Vue.prototype.$qs = qs; // 使用 sq 插件对 axios 中 json 数据进行转换
// Vue.prototype.$common=common;

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 国际化
//引用i18n
import VueI18n from 'vue-i18n';
import enLocale from 'element-ui/lib/locale/lang/en';        //引入Element UI的英文包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';    //引入Element UI的中文包

Vue.use(VueI18n); // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件

const i18n = new VueI18n({
  locale: localStorage.getItem('lan') || 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh': Object.assign(require('./VueI18n/language-zh.json'), zhLocale),
    'en': Object.assign(require('./VueI18n/language-en.json'), enLocale)
  }
  // messages:{
  //  'zh': Object.assign(require('./VueI18n/language-zh.json'), require('./VueI18n/demo-zh.json')),
  //  'en': Object.assign(require('./VueI18n/language-en.json'), require('./VueI18n/demo-en.json'))
  // }
});


Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
}); //兼容i18n 7.x版本设置


// 开发模式：npm run dev是前端自己开发用的
// 生产模式：npm run build 打包之后给后端放在服务端上用的
// Vue.config.productionTip = false
// 1
// 上面这行代码的意思 是阻止显示生产模式的消息。
// 如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。

// You are running Vue in development mode.
// Make sure to turn on production mode when deploying for production.

// 大概意思就是：
// 你运行的Vu是开发模式。为生产部署时，请确保启用生产模式。
Vue.config.productionTip = false;


axios.get('./static/config.json').then((res) => {
  // 跨域站点解决方案
  // 把后台域名作为属性挂载到VUE属性上去。
  Vue.prototype.base_url = res.data.base_url;
});

// http request拦截器 添加一个请求拦截器
axios.interceptors.request.use(function (config) {

  config.baseURL = Vue.prototype.base_url;
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 6000

  // Do something before request is sent
  //window.localStorage.getItem("accessToken") 获取token的value

  if (config.url.indexOf("/uservue/login") > -1) {
    return config; // 登录接口排除 不需要token

  } else {

    let token = window.localStorage.getItem("token")
    if (token) {
      //将token放到请求头发送给服务器,将tokenkey放在请求头中
      config.headers.token = token;
      //也可以这种写法
      // config.headers['token'] = token;
      return config;
    } else {
      // 直接输入地址 ，没有经过认证
      router.replace({
        path: '/login'

        // query: {redirect: router.currentRoute.fullPath}
      });
    }
  }
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
  // Do something with response data
  if (response.status == 200 && response.headers.token) {
    localStorage.setItem("token", response.headers.token);//存token
    return response;
  }

}, function (error) {
  // Do something with response error
  if (error.response) {
    switch (error.response.status) {
      // 返回401，清除token信息并跳转到登录页面
      case 401:
        localStorage.removeItem('token');
        router.replace({
          path: '/login'
          //登录成功后跳入浏览的当前页面
          // query: {redirect: router.currentRoute.fullPath}
        });
    }
    // 返回接口返回的错误信息
    return Promise.reject(error.response.data);
  }
  return Promise.reject(error);
});





// var vue = new Vue({
//   el: '#app',
//   router,
//   i18n, //在vue插入i18n
//   components: { App,App2 },
//   // template: '<App/>'
//   //   template: '<div>\
//   //   <h1>qiangge</h1>\
//   // <div>',
//   template: "<app2/>"
// });

var vue = new Vue({
  el: '#app',
  router,
  i18n, //在vue插入i18n
  components: { App,App2 },
  // template: '<App/>'
  //   template: '<div>\
  //   <h1>qiangge</h1>\
  // <div>',
  template: "<app/>",
  // template: "<app2/>",
  // template:'#item3'
});

      

// 一般我们都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue实例），
// 但是在实际开发中，我们往往会引入外部的js文件使用this，这个this就会指向window，
// 并不是我们期待的vue实例，那么就需要重新引入vue文件（import Vue from 'vue'）,
// 这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例，然后在需要使用的js中引入。
export default vue



/* eslint-disable no-new */

